<template>
    <div class="page-container">
        <a-form-model :model="form" style="margin: 50px 0 0 50px; width: 50vw;" layout="vertical">
            <a-form-model-item>
                <div slot="label">
                    <a-button icon="plus" size="small" style="margin-left: 10px;" @click="addSite">新增站点</a-button>
                </div>
                <a-table
                    :columns="form.tableColumns"
                    :data-source="form.tableData"
                    :rowKey="(record, index) => index"
                    :pagination="false"
                    :locale="{emptyText: '暂无站点配置'}"
                >
                    <template slot="hosts" slot-scope="text, item, index">
                        <a-tag
                            color="blue"
                            v-for="(v, k) in item.hosts"
                            :key="k"
                            style="margin: 0 5px 5px 0;"
                        >{{ v }}</a-tag>
                    </template>
                    <template slot="methods" slot-scope="text, item, index">
                        <div class="table-methods">
                            <a-button class="table-methods-btn" type="primary" icon="edit" @click="editSite(item)">编辑</a-button>
                            <a-button class="table-methods-btn" type="danger" icon="delete" @click="delSite(item)">删除</a-button>
                        </div>
                    </template>
                </a-table>
            </a-form-model-item>
        </a-form-model>
        <div class="nginxtip" @click="nginx.show = true">
            Nginx 配置参考
        </div>
        <a-modal
            title="新增站点"
            :visible="add.show"
            :confirm-loading="add.loading"
            @ok="commitAdd"
            @cancel="add.show = false"
            :closable="false"
            okText="保存"
            cancelText="取消"
        >
            <a-form-model :model="add.data" layout="vertical">
                <a-form-model-item label="站名">
                    <a-input v-model="add.data.name"></a-input>
                </a-form-model-item>
                <a-form-model-item>
                    <template #label>
                        <span>域名</span>
                        <span style="font-size: 13px; color: gray; margin-left: 10px;">纯域名部分，不需要带协议头，支持多对一</span>
                    </template>
                    <template
                        v-for="(v, k) in add.data.hosts">
                        <div :key="k" class="hosts-row">
                            <span class="hosts-row-span">{{ (k + 1) }}. </span>
                            <a-input
                                v-model="add.data.hosts[k]"
                                class="hosts-row-input"
                            ></a-input>
                        </div>
                    </template>
                </a-form-model-item>
                <a-button type="primary" shape="circle" icon="plus" @click="onHostsAddClick"></a-button>
            </a-form-model>
        </a-modal>
        <a-modal
            title="Nginx 配置参考"
            :visible="nginx.show"
            :closable="false"
        >
            <template #footer>
                <a-button key="submit" type="primary"  @click="nginx.show = false">确定</a-button>
            </template>
            <template>
                <a-input type="textarea" v-model="nginx.content" disabled autosize></a-input>
            </template>
        </a-modal>
    </div>
</template>
<script>
import {getSiteList, addSite, deleteSite} from '../../../api/setting'
export default {
    name: 'SiteManage',
    data() {return {
        form: {
            tableColumns: [
                {
                    title: '站名',
                    dataIndex: 'name',
                    key: 'name',
                    width: 200,
                },
                {
                    title: '域名',
                    dataIndex: 'host',
                    key: 'host',
                    width: 200,
                    scopedSlots: { customRender: 'hosts' },
                },
                {
                    title: '创建时间',
                    dataIndex: 'create_time',
                    key: 'create_time',
                    width: 200,
                },
                {
                    title: '操作',
                    dataIndex: 'methods',
                    key: 'methods',
                    scopedSlots: { customRender: 'methods' },
                    width: 100
                }
            ],
            tableData: []
        },
        add: {
            show: false,
            data: {
                id: 0,
                name: '',
                hosts: ['']
            },
            loading: false
        },
        nginx: {
            show: false,
            content: ''
        }
    }},
    mounted() {
        this.getSiteList()
    },
    methods: {
        editSite(v) {
            this.add.show = true
            this.add.data = {
                id: v.id,
                name: v.name,
                hosts: v.hosts
            }
        },
        onHostsAddClick() {
            this.add.data.hosts.push("")
        },
        addSite() {
            this.add.show = true
            this.add.data = {
                id: 0,
                name: '',
                hosts: ['']
            }
        },
        getSiteList() {
            getSiteList({}).then(res => {
                this.form.tableData = res.data
                let hosts = []
                res.data.forEach(v => {
                    hosts = [...hosts, ...v.hosts]
                })
                this.nginx.content = "server {\n" +
                    "    listen       80;\n" +
                    "\n" +
                    "    server_name  "+ hosts.join(' ') +";\n" +
                    "\n" +
                    "    listen 443  ssl;\n" +
                    "\n" +
                    "    ssl_certificate <ssl certificate here>;\n" +
                    "    ssl_certificate_key <ssl certificate key here>;\n" +
                    "\n" +
                    "    location / {\n" +
                    "        root </path/to/hikari2/public/>;\n" +
                    "        index  index.html index.htm index.php;\n" +
                    "        if (!-e $request_filename) {\n" +
                    "                rewrite ^/(.*)$ /index.php/$1;\n" +
                    "        }\n" +
                    "    }\n" +
                    "    location ~ [^/]\\.php(/|$) {\n" +
                    "        root </path/to/hikari2/public/>;\n" +
                    "        fastcgi_pass 127.0.0.1:<php fpm port>;\n" +
                    "        fastcgi_index index.php;\n" +
                    "        include fastcgi.conf;\n" +
                    "    }\n" +
                    "}"
            }).catch(e => {
                console.error(e)
                this.$message.error(e.msg || '网络错误')
            })
        },
        delSite(item) {
            this.$confirm({
                title: '确认删除',
                content: '是否要删除该站点？删除后该站点下的数据将被清空，且前台无法访问。',
                okText: '是',
                cancelText: '否',
                onOk: () => {
                    return new Promise((resolve, reject) => {
                        deleteSite({
                            id: item.id
                        }).then(res => {
                            this.$getSiteList()
                            this.getSiteList()
                            resolve()
                        }).catch(e => {
                            console.error(e)
                            this.$message.error(e.msg || '网络错误')
                        })
                    })
                },
                onCancel() {},
            });
        },
        commitAdd() {
            if (!this.add.data.name) {
                this.$message.error('请输入站点名')
                return
            }
            if (this.add.data.hosts.length == 0) {
                this.$message.error('请输入站点域名')
                return
            }
            this.add.loading = true
            let data = {
                name: this.add.data.name,
                host: this.add.data.hosts.join(',')
            }
            if (this.add.data.id > 0) {
                data.id = this.add.data.id
            }
            addSite(data).then(res => {
                this.add = {
                    loading: false,
                    show: false,
                    data: {
                        id: 0,
                        name: '',
                        hosts: ['']
                    }
                }
                this.$getSiteList()
                this.getSiteList()
            }).catch(e => {
                console.error(e)
                this.$message.error(e.msg || '网络错误')
            })
        }
    }
}
</script>
<style scoped>
.ant-modal-close-x {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.hosts-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    margin-bottom: 5px;
}
.hosts-row-span {
    margin-right: 20px;
}
.hosts-row-input {

}
.table-methods {
    display: flex;
    flex-direction: row;
}
.table-methods-btn {
    margin-right: 5px;
}
.nginxtip {
    margin-left: 50px;
}
.nginxtip::after {
    content: '>';
}
.nginxtip:hover {
    text-decoration: underline;
    cursor: pointer;
}
</style>


